<template>
  <div class="login">
    <a-form :model="formRef" v-bind="formLayout">
      <a-form-item label="用户名" has-feedback v-bind="validateInfos.username">
        <a-input v-model:value="formRef.username" />
      </a-form-item>
      <a-form-item label="密码" has-feedback v-bind="validateInfos.password">
        <a-input type="password" v-model:value="formRef.password" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 16, offset: 2 }">
        <a-button
          type="primary"
          @click.prevent="handleSubmit"
          :loading="showLoading"
          >{{ $route.query.from === "admin" ? "管理员" : "" }}登录</a-button
        >
        <a-button style="margin-left: 10px" @click="resetFields">重置</a-button>
        <a-button
          style="margin-left: 20px"
          @click="$router.push('register')"
          v-if="$route.query.from === 'user'"
          >去注册</a-button
        >
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 18, offset: 0 }">
        <a-button class="switch" type="link" @click="handleSwitch"
          >{{ $route.query.from === "user" ? "管理员" : "用户" }}登录</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { Form, message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { admin, user } from "@/api";
import { useStore } from "vuex";

const $router = useRouter();
const $route = useRoute();
const store = useStore();
const showLoading = ref(false);
const formRef = reactive({
  username: "",
  password: "",
});
const ruleRef = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
    },
    {
      max: 16,
      message: "用户名最长为16个字符",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
});
const { useForm } = Form;
const { resetFields, validate, validateInfos } = useForm(formRef, ruleRef);
const formLayout = reactive({
  labelCol: { span: 6 },
  wrapperCol: { span: 12 },
});

const handleSwitch = () => {
  resetFields();
  $router.push({
    path: "/user/login",
    query: {
      from: $route.query.from === "admin" ? "user" : "admin",
    },
  });
};
const handleSubmit = async () => {
  await validate();
  showLoading.value = true;
  let res;
  if ($route.query.from === "admin") {
    res = await admin.get(formRef);
  } else {
    res = await user.get(formRef);
  }
  if (res.data.password === formRef.password) {
    message.success("登录成功！");
    store.commit("setUser", {
      username: formRef.username,
      isAdmin: $route.query.from === "admin",
    });
    window.user = {
      username: formRef.username,
      isAdmin: $route.query.from === "admin",
    };
    $router.push({ name: "app" });
  } else {
    message.error("登录失败！");
  }
  showLoading.value = false;
};
</script>

<style lang="less" scoped>
.login {
  :deep(div.ant-row:nth-child(4)) {
    margin-bottom: 0;
  }
  .switch {
    margin-left: auto;
    display: block;
  }
}
</style>
